import React, { useState, useEffect } from 'react';
import './login.less';
//引入antd-mobile
import { Form, Input } from 'antd-mobile';
//引入react-vant
import { Button } from 'react-vant';
//引入axios
import axios from 'axios';
//引入history
import { history } from 'umi';
export default function index() {
  //手机号
  const [phone, setPhone] = useState('');
  //验证码
  const [visible, setVisible] = useState('');
  //发送到手机上的验证码
  const [vcode, setvcode] = useState();
  let timer; //验证码定时器
  const [second, setSecond] = useState(59); //倒计时秒数
  const [btnDisabled, setBtnDisabled] = useState(false); //按钮是否可点击，false可点击

  // 初始化时清除定时器
  useEffect(() => {
    clearInterval(timer);
    return () => clearInterval(timer);
  }, []);

  // 监听秒数的变动
  useEffect(() => {
    if (second > 0 && second < 60) {
    } else {
      // 定时器超过时间后，可以重新发送验证码
      clearInterval(timer);
      // 可点击
      setBtnDisabled(false);
      setSecond(60);
    }
  }, [second]);

  // 发送验证码，开启倒计时
  const sendCode = () => {
    // 倒计时递减
    timer = setInterval(() => setSecond((pre) => pre - 1), 1000);
    // 不可点击
    setBtnDisabled(true);
  };
  //登录
  function LoginFn() {
    if (phone && visible == vcode) {
      console.log(visible, vcode, '111');
      const { data } = axios
        .get('http://localhost:3000/zhh/phone/' + phone)
        .then((response) => {
          console.log(response.data);
          if (response.data.code == 200) {
            history.push('/qishou/jiedan');
            localStorage.setItem('token', response.data.token);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    } else {
      alert('验证码错误');
    }
  }

  return (
    <div id="app">
      {/* 头部 */}
      <div className="square">
        <p className="login">登录 · 骑手端</p>
      </div>

      {/* 主体 */}
      <div className="login_content">
        <div id="logo">
          <div id="u288" className="ax_default box_2">
            <img
              id="u288_img"
              src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/产品分析/u288.png"
              alt=""
            />
          </div>
          <div id="u289" className="ax_default box_2">
            <img
              id="u289_img"
              src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/产品分析/u289.png"
              alt=""
            />
          </div>
          <div id="u290" className="ax_default box_2">
            <img
              id="u290_img"
              src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/产品分析/u290.png"
              alt=""
            />
          </div>
        </div>
        <div className="login_form">
          <Input
            className="input"
            placeholder="请输入手机号"
            value={phone}
            onChange={(val) => {
              setPhone(val);
              console.log(phone, '手机号');
            }}
          />
          <Form.Item
            // label='短信验证码'
            extra={
              <div className="extraPart">
                <a
                  onClick={() => {
                    sendCode();
                    let { data } = axios
                      .get('http://localhost:3000/zhh/captcha')
                      .then((response) => {
                        console.log(response.data);
                        if (response.data.code == 200) {
                          setvcode(response.data.captcha);
                        }
                      })
                      .catch((error) => {
                        console.log(error);
                      });
                  }}
                  style={{ color: '#67cb40' }}
                >
                  {!btnDisabled ? '获取验证码' : `${second}s后重发`}
                </a>
              </div>
            }
          >
            <Input
              className="left-to-right"
              placeholder="请输入验证码"
              clearable
              value={visible}
              onChange={(val) => {
                setVisible(val);
                console.log(visible, '验证码');
              }}
            />
          </Form.Item>
        </div>
        <p style={{ color: '#cccccc', marginTop: '8px', marginLeft: '30px' }}>
          登录及表示同意{' '}
          <span style={{ color: '#67cb40' }}>《OMINI骑手协议》</span>
        </p>

        <Button
          onClick={() => LoginFn()}
          style={{ marginTop: '50px' }}
          type="primary"
          color="#67cb40"
          block
          round
        >
          登录
        </Button>
        <Button
          style={{ border: '1px solid #67cb40', marginTop: '15px' }}
          block
          round
        >
          <span style={{ color: '#67cb40' }}>取消</span>
        </Button>
      </div>
    </div>
  );
}
